<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>日志管理</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
		<link rel="stylesheet" href="../../../css/public.css" media="all">
	</head>
	<body>
		<div class="layuimini-container">
			<div class="layuimini-main">
				<!--搜索开始-->
				<fieldset class="layui-elem-field layuimini-search">
					<legend>搜索信息</legend>
					<div style="margin: 10px 10px 10px 10px">
						<form class="layui-form layui-form-pane" action="" id="searchFrm">
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">登陆名</label>
									<div class="layui-input-inline">
										<input type="text" name="loginname" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">登陆地址</label>
									<div class="layui-input-inline">
										<input type="text" name="loginip" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">开始时间</label>
									<div class="layui-input-inline">
										<input type="text" name="startTime" id="startTime" readonly="readonly" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">结束时间</label>
									<div class="layui-input-inline">
										<input type="text" name="endTime" id="endTime" readonly="readonly" autocomplete="off" class="layui-input">
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-block" style="text-align: center;">
									<a class="layui-btn " lay-submit="" lay-filter="data-search-btn"><label class="layui-icon layui-icon-search"></label>搜索</a>
									<a class="layui-btn layui-btn-warm" onclick="javascript:$('#searchFrm')[0].reset()" lay-filter="data-search-btn"><label
										 class="layui-icon layui-icon-refresh"></label>重置</a>
								</div>
							</div>
						</form>
					</div>
				</fieldset>
				<!--搜索结束-->

				<!--表格开始-->
				<table class="layui-hide" id="loginfoTable" lay-filter="loginfoTable"></table>
				<script type="text/html" id="loginfoToolBar">
					<a class="layui-btn layui-btn-sm layui-btn-danger data-count-delete" lay-event="batchdelete">批量删除</a>
        </script>
				<script type="text/html" id="loginfoTableBar">
					<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
		</script>

				<!--表格结束-->
			</div>
		</div>
		<script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
		<script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
		<script src="../../../lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
		<script src="../../../lib/common/jquery.cookie.min.js" charset="utf-8"></script>
		<script src="../../../lib/common/common.js" charset="utf-8"></script>

		<script>
			
			
			
			
			layui.use(['form', 'table', 'laydate', 'layer'], function() {
				var form = layui.form;
				var table = layui.table;
				var laydate = layui.laydate;
				var layer = layui.layer;

				//渲染时间选择器
				laydate.render({
					elem: '#startTime',
					type: 'datetime'
				});
				laydate.render({
					elem: '#endTime',
					type: 'datetime'
				});

				var tableIns = table.render({
					elem: '#loginfoTable',
					url: api + 'loginfo/loadAllLoginfo',
					toolbar: "#loginfoToolBar",
					cellMinWidth: true,
					cols: [
						[{
								type: "checkbox",
								fixed: "left"
							},
							{
								field: 'id',
								title: 'ID',
								align: "center"
							},
							{
								field: 'loginname',
								title: '登陆名',
								align: "center"
							},
							{
								field: 'loginip',
								title: '登陆地址',
								align: "center"
							},
							{
								field: 'logintime',
								title: '登陆时间',
								align: "center"
							},
							{
								title: '操作',
								templet: '#loginfoTableBar',
								fixed: "right",
								align: "center"
							}
						]
					],
					page: true
				});

		

				// 监听搜索操作
				form.on('submit(data-search-btn)', function(data) {
					var params = $("#searchFrm").serialize()
					//执行搜索重载
					table.reload('loginfoTable', {
						page: {
							curr: 1
						},
						url: api + 'loginfo/loadAllLoginfo?' + params
					});
					return false;
				});

				//监听表头的事件
				table.on('toolbar(loginfoTable)', function(obj) {
					var checkStatus = table.checkStatus(obj.config.id);
					switch (obj.event) {
						case 'batchdelete':
							var checkStatus = table.checkStatus('loginfoTable'); //idTest 即为基础参数 id 对应的值
							var data = checkStatus.data;
							var length = checkStatus.data.length;
							console.log(checkStatus.data) //获取选中行的数据
							console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
							if (length == 0) {
								layer.msg("请选中要删除的行数据");
							} else {
								layer.confirm('真的删除选择中这些数据么?', function(index) {
									var params = "";
									$.each(data, function(index, item) {
										if (index == 0) {
											params += "ids=" + item.id;
										} else {
											params += "&ids=" + item.id;
										}
									});
									$.post(api + "loginfo/batchDeleteLoginfo", params, function(res) {
										layer.msg(res.msg);
										// 刷新表格
										tableIns.reload();
										layer.close(index);
									})
								});
							}
							//layer.msg('批量删除');
							break;
					};
				});

				//监听行数据的事件
				table.on('tool(loginfoTable)', function(obj) {
					var data = obj.data;
					if (obj.event === 'delete') {
						layer.confirm('真的删除这条数据么', function(index) {
							$.post(api + "loginfo/deleteLoginfo", {
								id: data.id
							}, function(res) {
								layer.msg(res.msg);
								// 删除表格数据 假删除
								obj.del();
								layer.close(index);
							})
						});
					}
				});

			});
		</script>
		<script>

		</script>

	</body>
</html>
